<template>
	<view :style="themeColor" style="overflow-x: hidden;">
		<view class="page">
			<view class="flex align-stretch benben-position-layout flex searchResultsMall_flex_0"
				:style="{height:(120+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex align-center  flex-sub searchResultsMall_fd0_0'>
					<view class='flex align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
						<text class='fu-iconfont2  searchResultsMall_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex align-center  searchResultsMall_fd0_0_c1'>
						<image class='searchResultsMall_fd0_0_c1_c0' mode="aspectFit" :src='STATIC_URL+"542.png"'>
						</image>
						<input v-model="keyword" class='flex-sub searchResultsMall_fd0_0_c1_c1' type="text"
							:placeholder="searchPlac" confirm-type="done" :maxlength="-1"
							placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" @confirm="resetgoodList" />
					</view>
				</view>

			</view>
			<view :style="{height: (120+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout" style="position: relative;">
				<view class='flex flex-direction align-stretch searchResultsMall_fd1_0'>
					<view class='flex flex-wrap align-center searchResultsMall_fd1_0_c0'
						style="font-family: Alimama DongFangDaKai;">
						<view class='flex flex-wrap align-center' style="padding-right: 56rpx;">
							<text class='searchResultsMall_fd1_0_c0_c0_c0' @click="changeToZongheSortFn">综合</text>
							<view class='flex flex-wrap align-center searchResultsMall_fd1_0_c0_c0_c1'>
								<CSort name="销量" v-model="xiaoliangSort" />
							</view>
							<view class='flex flex-wrap align-center searchResultsMall_fd1_0_c0_c0_c1'>
								<CSort name="价格" v-model="priceSort" />
							</view>
						</view>
						<image class='searchResultsMall_fd1_0_c0_c1' mode="aspectFit" :src='STATIC_URL+"206.png"'
							@click="isLine=!isLine"></image>
						<view class='flex flex-wrap align-center searchResultsMall_fd1_0_c0_c2'
							@tap.stop="popupShow1698308218631=true">

							<!-- <view class='flex  searchResultsMall_fd1_0_c0_c2_c0'></view> -->

							<text class='searchResultsMall_fd1_0_c0_c2_c1'>筛选</text>
							<image class='searchResultsMall_fd1_0_c0_c2_c2' mode="aspectFit"
								:src='STATIC_URL+"712.png"'></image>
						</view>
					</view>
					<view v-if="isLine" class='flex flex-direction flex-wrap align-stretch'>
						<Good2 v-for="item in goodList" :key="item.aid" :item="item" />
					</view>
					<view v-else class="flex align-center justify-between flex-wrap" style="padding: 0 24rpx;">
						<Good v-for="item in goodList" :key="item.aid" :item="item" />
					</view>

					<fu-empty v-if="goodListLoading"></fu-empty>
					<fu-empty-ui v-else-if="goodListEmpty"></fu-empty-ui>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<SortPopup v-model="popupShow1698308218631" @confirm="sortPopupConfirm" />

		</view>
	</view>
</template>
<script>
	import {
		goodModuleMixin
	} from './goodModuleMixin'
	import {
		validate
	} from '@/common/utils/validate.js'
	import Good from '@/pages/tabBar/mallPage/Good.vue'
	import {
		GOOD_SORT_TYPE,
		SORT_TYPE
	} from "@/const/index.js"
	import CSort from '@/components/CSort/CSort.vue'
	import SortPopup from './SortPopup.vue'

	export default {
		components: {
			Good,
			CSort,
			SortPopup,
		},
		mixins: [goodModuleMixin, ],
		data() {
			return {
				"popupShow1698308218631": false,
				"screenType": [{
					"name": "推荐",
					"value": "1",
					"image": ""
				}, {
					"name": "视频",
					"value": "2",
					"image": ""
				}, {
					"name": "图文",
					"value": "3",
					"image": ""
				}],
				"screen_id": "",
				"price_id": "",
				"price": [{
					"name": "0-90元",
					"value": "1",
					"image": ""
				}, {
					"name": "100-199元",
					"value": "2",
					"image": ""
				}],
				"keyword": "",
				"cid": "",
				isLine: false,
				xiaoliangSort: SORT_TYPE.NOT, // 销量排序
				priceSort: SORT_TYPE.NOT, // 价格排序
				isSortEnd: true, // 是否排序结束（用于防止多条件触发错乱）
				order_type: GOOD_SORT_TYPE.ZONGHE,
				apiPinpai: "",
				apiStartPrice: "",
				apiEndPrice: "",
				OPEN_TYPE_DEF: "1",
				openType: "1", // 进入页面类型 1 全部商品【默认】 2 文创商品
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
		},
		watch: {
			xiaoliangSort() {
				this.sortChange1(() => {
					this.priceSort = SORT_TYPE.NOT;
					this.order_type = GOOD_SORT_TYPE.XIAO_LIANG;
				});
			},
			priceSort() {
				this.sortChange1(() => {
					this.xiaoliangSort = SORT_TYPE.NOT;
					this.order_type = GOOD_SORT_TYPE.PRICE;
				});
			},
		},
		onLoad(options) {
			let {
				keyword,
				cid
			} = options
			if (keyword !== undefined) this.keyword = keyword || ""
			if (cid !== undefined) this.cid = cid
			this.openType = options.ot || this.OPEN_TYPE_DEF;
			this.getgoodList();
		},
		methods: {
			/** 确认排序数据 */
			sortPopupConfirm(info = {}) {
				this.apiPinpai = info.apiPinpai;
				this.apiStartPrice = info.apiStartPrice;
				this.apiEndPrice = info.apiEndPrice;
				this.resetgoodList();
			},
			/** 改变为综合排序 */
			changeToZongheSortFn() {
				this.sortChange1(() => {
					this.xiaoliangSort = SORT_TYPE.NOT;
					this.priceSort = SORT_TYPE.NOT;
					this.order_type = GOOD_SORT_TYPE.ZONGHE;
				});
			},
			/** 改变排序1 */
			sortChange1(backFn) {
				if (!this.isSortEnd) return;
				this.isSortEnd = false;
				backFn && backFn();
				this.$nextTick(() => {
					this.isSortEnd = true;
					this.resetgoodList()
				});
			},
			//是否显示显示全部下拉弹窗
			showallFunc() {
				if (this.allshow === true) {
					this.allshow = false;
				} else {
					this.allshow = true;
					this.Func()
				}
				if (this.show_id == '2') {
					this.show_id = '1';
				}
			},
			//是否显示筛选弹窗
			isscreenshowFunc() {
				if (this.screenshow === true) {
					this.screenshow = false;
				} else {
					this.screenshow = true;
				}
			},
			//切换类型
			switchTypeFunc() {
				if (this.show_id == '1') {
					this.show_id = '2';
				} else {
					this.show_id = '1';
				}
			},
			//搜索
			searchFunc() {
				if (this.show_id == '2') {
					this.Func()
				} else {
					this.Func()
				}
			},
			//点击完成
			accomplishFunc() {
				if (this.screen_id == '1') {
					this.is_recommend = '1';
					this.grass_type = '';
				} else if (this.screen_id == '2') {
					this.grass_type = '1';
					this.is_recommend = '';
				} else {
					this.grass_type = '2';
					this.is_recommend = '';
				}
				this.Func()
				this.screenshow = false;
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import './goodsList.scss';
</style>